<template>
  <div class="app-container">
    <div style="margin-bottom: 16px; display: flex; gap: 10px; align-items: center;">
      <el-input v-model="searchKeyword" placeholder="请输入任务ID关键词" clearable style="width: 250px;"
        @keyup.enter.native="fetchData" />
      <el-button type="primary" @click="fetchData">搜索</el-button>
      <el-checkbox v-model="showMy" @change="fetchData">只看我的</el-checkbox>
    </div>

    <TaskLogTable :list="list" :page="page" :limit="limit" :total="total" @cancel-task="handleCancelTask"
      @page-change="handlePageChange" @size-change="handleSizeChange" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTaskLogs } from '@/api/request_server'
import TaskLogTable from './components/TaskLogTable.vue'
import { addOrRemoveDomain, setAdDeployment } from '@/api/request_server'
import { DEPLOY_STATUS, TASK_TAG } from '@/assets/data/constants'
export default {
  name: 'DeployLog',
  components: { TaskLogTable },
  data() {
    return {
      list: [],
      page: 1,
      limit: 15,
      total: 0,
      searchKeyword: '',
      host: '',
      dirpath: '',
      user: null,
      showMy: false
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles'])
  },
  created() {
    this.getUser()
    this.host = this.$route.query.host || ''
    this.dirpath = this.$route.query.dirpath || ''
    const baseKeyword = [this.host, this.dirpath].filter(Boolean).join('_')
    this.searchKeyword = baseKeyword
    this.fetchData()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        avatar: this.avatar
      }
    },
    async fetchData() {
      const params = {
        page: this.page,
        pageSize: this.limit
      }

      let keyword = this.searchKeyword.trim()
      if (keyword) {
        keyword = keyword.replace(/^https?:\/\//, '').replace(/\/$/, '')
        params.keyword = keyword
      }

      if (this.showMy && this.user.name) {
        params.operator = this.user.name
      }

      const res = await getTaskLogs(params)
      if (res.success) {
        this.list = res.list || []
        this.total = res.total || 0
      }
    },

    async handleCancelTask(row) {
      const params = {
        host: row.host,
        dirpath: row.dirpath,
        operator: this.$store.getters.name,
        status: DEPLOY_STATUS.CANCELED,
        tasktag: row.tasktag,
      };

      if ([TASK_TAG.USED_D_CONFIG, TASK_TAG.CANCELED_D_CONFIG].includes(row.tasktag)) {
        const res = await setAdDeployment(params);
        if (res.success) this.fetchData();
      } else if ([TASK_TAG.PUSH, TASK_TAG.ADD_AD, TASK_TAG.REPUSH, TASK_TAG.DESTROY].includes(row.tasktag)) {
        const res = await addOrRemoveDomain(params);
        if (res.success) this.fetchData();
      }
    },

    handlePageChange(newPage) {
      this.page = newPage
      this.fetchData()
    },
    handleSizeChange(newSize) {
      this.limit = newSize
      this.page = 1
      this.fetchData()
    },

  }
}
</script>

<style></style>
